<template>
    <t-breadcrumb :max-item-width="'150'" style="margin-bottom: 10px;">
        <t-breadcrumb-item> {{ $t('layout.aside.photographArea') }} </t-breadcrumb-item>
        <t-breadcrumb-item> {{ $t('layout.aside.photograph') }}</t-breadcrumb-item>
    </t-breadcrumb>
    <t-space direction="horizontal">
        <span>{{ $t('report.userName') }}:</span>
        <t-input style="width: 140px;" size='small' v-model="searchValue.extendedValue1" clearable
            :placeholder="$t('common.input.name')"></t-input>
        <span>{{ $t('report.reporter') }}:</span>
        <t-input style="width: 140px;" size='small' v-model="searchValue.extendedValue2" clearable
            :placeholder="$t('common.input.name')"></t-input>
        {{ $t('report.type.type') }}:
        <t-select style="width: 140px;" size='small' v-model="searchValue.extendedValue3" placeholder="请选择">
            <t-option v-for="type in types" :key="type.id" :label="type.name" :value="type.id" />
        </t-select>
        {{ $t('report.status') }}:
        <t-select style="width: 140px;" size='small' v-model="searchValue.searchValue" placeholder="请选择">
            <t-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id" />
        </t-select>
        <t-button @click="getCommentReports" size="small">{{ $t('common.button.search') }}</t-button>
    </t-space>
    <t-table style="margin-top: 10px;" height="calc(100vh - 333px)" :pagination="pagination" size="small"
        row-key="index" :data="datas" :columns="columns">
        <template #creationTime="{ row }">
            {{ row.creationTime.replace('T', ' ').substr(0, 19) }}
        </template>
        <template #updateTime="{ row }">
            <span v-if="row.updateTime!='0001-01-01T00:00:00'">{{ row.updateTime.replace('T', ' ').substr(0, 19) }}</span>
        </template>
        <template #statusName="{ row }">
            <t-tag v-if="row.status == 0">未处理</t-tag>
            <t-tag v-else-if="row.status == 1" theme="danger">已违规</t-tag>
            <t-tag v-else theme="success">未违规</t-tag>
        </template>
        <template #operation="{ row }">
            <t-link theme='primary' v-if="row.status == 0" @click="editShow(row)">
                {{ $t('report.edit') }}
            </t-link>
            <t-link theme='primary' v-else disabled @click="editShow(row)">
                {{ $t('report.edit') }}
            </t-link>
        </template>
    </t-table>

    <t-dialog class="re-dia" v-model:visible="visible" width="30%" :cancelBtn="$t('common.button.cancel')"
        :confirmBtn="$t('common.button.confirm')" @confirm="confirm">
        <p>{{ $t('report.userName') }}： {{ data.reporterName }}</p>
        <p>{{ $t('report.connent') }}：<t-textarea readonly :autosize='{ minRows: 3 }' :value="data.commentContent" />
        </p>
        <p>{{ $t('common.description') }}： <t-textarea readonly :autosize='{ minRows: 3 }' :value="data.description" />
        </p>
        <p>{{ $t('report.status') }}： <t-radio-group :value="data.status" @change="onStatusChange">
                <t-radio :value="item.id" v-for="item in statusOptions">{{ item.name }}</t-radio>
            </t-radio-group></p>
    </t-dialog>



</template>

<script setup>
import api from '../api'
import { ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next';

const searchValue = ref({
    pageIndex: 1,
    pageSize: 10,
    searchValue: '全部',
    searchName: '',
    extendedValue1: '',
    extendedValue2: '',
    extendedValue3: '全部',
    total: 0
})
const status = [{ id: '全部', name: '全部' }, { id: 0, name: '未处理' }, { id: 1, name: '已违规' }, { id: 2, name: '未违规' }]
const pagination = ref({
    defaultPageSize: 20,
    total: 0,
    defaultCurrent: 1,
    size: 'small'
})
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const columns = [
    { colKey: 'reportTypeName', title: t('report.type.type'), align: 'center' },
    { colKey: 'appUserName', title: t('report.userName'), align: 'center' },
    { colKey: 'description', title: t('common.description'), align: 'center', ellipsis: true },
    { colKey: 'commentContent', title: t('report.connent'), align: 'center', ellipsis: true },
    { colKey: 'reporterName', title: t('report.reporter'), align: 'center' },
    { colKey: 'statusName', title: t('report.status'), align: 'center' },
    { colKey: 'creationTime', title: t('report.creationTime'), width: '160', align: 'center' },
    { colKey: 'updateTime', title: t('report.updateTime'), width: '160', align: 'center' },
    { colKey: 'operation', title: t('common.operation'), width: '160', align: 'center' }]
const datas = ref([])
const types = ref([])
const statusOptions = [{ id: 1, name: '已违规' }, { id: 2, name: '未违规' }]

const confirm = () => {
    api.updateCommentReport(data.value).then(res => {
        if (res.successed) {
            visible.value = false
            getCommentReports()
            MessagePlugin.success({ content: "处理成功!", duration: 800 })
        }
    })

}

const onStatusChange = (newValue) => {
    data.value.status = newValue;
}

const data = ref({})
const visible = ref(false)

const editShow = (row) => {
    visible.value = true
    data.value = JSON.parse(JSON.stringify(row))
}

const getReportTypes = () => {
    api.getReportTypes().then(res => {
        if (res.successed) {
            types.value = res.datas
            types.value.unshift({ id: '全部', name: '全部' })
            statusOptions.value = res.datas
            console.log(types.value)
        }
    })
}
getReportTypes()



const getCommentReports = () => {
    searchValue.value.pageIndex = pagination.value.defaultCurrent
    searchValue.value.pageSize = pagination.value.defaultPageSize
    console.log(searchValue.value)

    api.getCommentReports(searchValue.value).then(res => {
        if (res.successed) {
            datas.value = res.datas
            pagination.value.total = res.total
            console.log(datas.value)

        }
    })

}
getCommentReports()



</script>

<style lang="scss">
.re-dia {
    p {
        line-height: 40px;
    }
}
</style>